<template>
  <div>
    <el-form ref="form" :model="form" label-width="140px" :rules="rules">
      <sticky :z-index="10" :class-name="'sub-navbar '+ form.status">
        <el-row :gutter="10">
          <el-col :xs="{span:10,offset:14}" :sm="{span:6,offset:18}" :md="{span:6,offset:18}" :lg="{span:4,offset:20}" :xl="{span:4,offset:20}">
            <el-button :loading="loading" type="primary" size="small" @click="onSubmit('form')">增加</el-button>
            <el-button type="warning" size="small" @click="onCancel">关闭</el-button>
          </el-col>
        </el-row>
      </sticky>
      <div class="app-con">
        <el-row :gutter="10">
          <el-col :xs="{span:24,offset:0}" :sm="{span:16,offset:0}" :md="{span:10,offset:1}" :lg="{span:10,offset:1}" :xl="{span:10,offset:1}">
            <el-form-item label="角色" prop="roleCode">
              <el-select v-model="form.roleCode" placeholder="请选择角色">
                <el-option label="内容编辑" value="editor" />
                <el-option label="审核员" value="checker" />
                <el-option label="管理员" value="admin" />
                <el-option label="超级管理员" value="superAdmin" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :xs="{span:24,offset:0}" :sm="{span:16,offset:0}" :md="{span:10,offset:1}" :lg="{span:10,offset:1}" :xl="{span:10,offset:1}">
            <el-form-item label="用户名" prop="username">
              <el-input v-model="form.username" placeholder="请输入用户名" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :xs="{span:24,offset:0}" :sm="{span:16,offset:0}" :md="{span:10,offset:1}" :lg="{span:10,offset:1}" :xl="{span:10,offset:1}">
            <el-form-item label="密码" prop="password">
              <el-input v-model="form.password" show-password placeholder="请输入8-16位的密码" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :xs="{span:24,offset:0}" :sm="{span:16,offset:0}" :md="{span:10,offset:1}" :lg="{span:10,offset:1}" :xl="{span:10,offset:1}">
            <el-form-item label="姓名" prop="realName">
              <el-input v-model="form.realName" placeholder="请输入姓名" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :xs="{span:24,offset:0}" :sm="{span:16,offset:0}" :md="{span:10,offset:1}" :lg="{span:10,offset:1}" :xl="{span:10,offset:1}">
            <el-form-item label="联系人电话" prop="tel">
              <el-input v-model="form.tel" placeholder="请输入联系人电话" />
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
  </div>
</template>

<script>
import { add } from '@/api/manage'
import Sticky from '@/components/Sticky'
export default {
  name: 'ManageAdd',
  components: {
    Sticky
  },
  data() {
    return {
      loading: false,
      form: {
        username: '',
        password: '',
        realName: '',
        tel: '',
        roleCode: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 5, max: 20, message: '长度在5到20个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 16, message: '长度在6到16个字符', trigger: 'blur' }
        ],
        realName: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { max: 10, message: '姓名不得大于10个字符', trigger: 'blur' }
        ],
        tel: [
          { required: true, message: '请输入联系人电话', trigger: 'blur' },
          { min: 8, max: 13, message: '长度在8到13个字符', trigger: 'blur' }
        ],
        roleCode: [
          { required: true, message: '请选择请选择角色', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
  },
  methods: {
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true
          add(this.form).then(response => {
            if (response.result === 1) {
              this.$message({
                message: '增加成功', type: 'success'
              })
              this.onClose()
            } else {
              this.$message({
                message: '增加失败', type: 'warning'
              })
            }
            this.loading = false
          }).catch(() => {
            this.loading = false
            this.$message({
              message: '增加失败', type: 'warning'
            })
          })
        } else {
          return false
        }
      })
    },
    onCancel() {
      this.onClose()
    },
    onClose() {
      this.$parent.$parent.$children[2].closeSelectedTag({ path: this.$route.path, name: this.$route.name, fullPath: this.$route.fullPath, meta: this.$route.meta })
    }
  }
}
</script>

<style scoped>
.line{
  text-align: center;
}
.app-con{
  padding: 20px 10px 50px 10px;
}
</style>
